<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <script>

        //使用原始的js
        window.onload=function(){
            // var inputs=document.getElementsByTagName("input");//集合
            // for(var i=0;i<inputs.length;i++){
            //     inputs[i].onclick=function(){
            //         console.log(this.value);//事件源，触发事件的元素
            //     };

            // }

        };

        $(function(){
            console.log($("input"));
            $("input").click(function(){//获取的是jQuery对象集合，会自动进行隐式迭代(循环遍历)
                // console.log(this.value);//使用的是DOM对象.value
                // console.log($("input").val());//使用的是jQuery对象.val(),获取的始终是jQuery对象中第一个元素的值
                console.log($(this).val());//将DOM对象转换为jQuery对象,$(DOM对象)
                
                // $("input").css("color","red");//所有的input的字体颜色会进行修改

                this.style.color="green";
                // $(this).css("color","red");

            });
        });

        
    </script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <input type="button" value="按钮4">
    <input type="button" value="按钮5">
</body>
</html>